<template>
  <div class="app-container">
    <el-tabs v-model="queryParams.taskType" @tab-change="handleQuery">
      <el-tab-pane label="全部" name="全部"></el-tab-pane>
      <el-tab-pane label="待办" name="待办"></el-tab-pane>
      <el-tab-pane label="超时" name="超时"></el-tab-pane>
      <el-tab-pane label="已办" name="已办"></el-tab-pane>
    </el-tabs>
    <div class="content-wrap">
      <div class="search">
        <div class="search-left">
          <el-form
        class="search-container"
        :model="queryParams"
        ref="queryRef"
        :inline="true"
        @keyup.enter="handleQuery"
      >
        <!-- 在此添加搜索项 -->
        <el-form-item label="所属项目" prop="projectName">
          <el-input v-model="queryParams.projectName" placeholder="请输入所属项目" clearable />
        </el-form-item>
        <el-form-item label="任务" prop="planName">
          <el-input v-model="queryParams.planName" placeholder="请输入任务" clearable />
        </el-form-item>
      </el-form>
      </div>
      <div class="search-right">
        <el-button type="primary" icon="Search" @click="handleQuery">查找</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </div>
      </div>
      <div class="body-container">
        <el-table :data="tableData">
          <el-table-column label="序号" width="60" type="index" align="center">
            <template #default="scoped">
              <span>{{ (queryParams.current - 1) * queryParams.size + scoped.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="projectId" label="所属项目" min-width="200" show-overflow-tooltip>
            <template #default="scoped">
              <span class="plan-name">
                <dc-view v-model="scoped.row.projectId" objectName="project" />
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="planName" label="任务" min-width="200" show-overflow-tooltip>
            <template #default="scoped">
              <span class="plan-name">
                {{ scoped.row.planName }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="handlePersonId" label="处理人" width="140" align="center">
            <template #default="scoped">
              <dc-view v-model="scoped.row.handlePersonId" objectName="user" showKey="realName" />
            </template>
          </el-table-column>
          <el-table-column prop="planStatus" label="状态" align="center" width="120">
            <template #default="scoped">
              <dc-dict :options="DC_PMS_PLAN_STATUS" :value="scoped.row.planStatusId" />
            </template>
          </el-table-column>
          <el-table-column prop="startDate" label="开始日期" align="center" width="120" />
          <el-table-column prop="endDate" label="结束日期" align="center" width="120" />
          <el-table-column prop="isMilestone" label="是否里程碑" align="center" width="120">
            <template #default="scoped">
              {{ scoped.row.isMilestone ? '是' : '否' }}
            </template>
          </el-table-column>
          <el-table-column prop="output" label="输出" align="center" width="140">
            <template #default="scoped">{{ scoped.row.output || '-' }}</template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center" width="140">
            <template #default="scoped">
              <el-button type="primary" text @click="handlePerform(scoped.row)"> 执行 </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <dc-pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.current"
        v-model:limit="queryParams.size"
        @pagination="getData"
      />
    </div>
  </div>
  <!-- 计划执行 -->
  <planPerform ref="planPerformRef" @confirm="getData()" :projectInfo="info" />
</template>
<script setup name="MyTask">
import { reactive, toRefs, onMounted } from 'vue';
import Api from '@/api/index';
import planPerform from '@/views/pdp/project/detail/components/plan/components/planPerform.vue';

const { proxy } = getCurrentInstance();

const { DC_PMS_PLAN_STATUS } = proxy.useCache([{ key: 'DC_PMS_PLAN_STATUS' }]);

const route = useRoute();

const pageData = reactive({
  loading: false,
  queryParams: { size: 10, current: 1, taskType: '待办' },
  planPerformRef: null,
  tableData: [],
  info: {},
  total: 0,
});

const { loading, queryParams, planPerformRef, tableData, info, total } = toRefs(pageData);

onMounted(() => {
  getData();
});

// 详情
const getData = async () => {
  try {
    loading.value = true;
    const res = await Api.pdp.planItem.getPlanitemList({
      ...queryParams.value,
      projectId: route.params.id,
      isMyPlan: true,
      // planStatusId: '1866034013076316162',
    });
    const { code, data } = res.data;
    if (code === 200) {
      tableData.value = data.records;
      total.value = data.total;
    }
    loading.value = false;
  } catch (e) {
    loading.value = false;
  }
};

// 项目详情
const getProjectDetail = async id => {
  try {
    loading.value = true;
    const res = await Api.pdp.project.detail({ id });
    const { code, data } = res.data;
    if (code === 200) {
      info.value = data;
    }
    loading.value = false;
  } catch (e) {
    loading.value = false;
  }
};

// 处理计划执行
const handlePerform = async plan => {
  await getProjectDetail(plan.projectId);
  planPerformRef.value.openDrawer(plan);
};

const handleQuery = () => {
  queryParams.value.current = 1;
  getData();
};

const resetQuery = () => {
  queryParams.value.current = 1;
  queryParams.value.size = 10;
  queryParams.value.projectName = '';
  queryParams.value.planName = '';
  getData();
};
</script>
<style lang="scss" scoped>
.app-container {
  padding: 0 16px 16px 16px;
  display: flex;
  flex-direction: column;
  .main-container {
    display: flex;
    flex: 1;
    overflow: hidden;
    gap: 20px;
  }
}
</style>
